<template>
	<view class="order-data">
		<view class="title">
			<view class="t1"> 订单数据统计 </view>
			<view class="t2"> (单位：单) </view>
		</view>
		<view class="echarts-box">
			<view class="echarts">
				<view id="echarts" :prop="data" :change:prop="echarts.updateEcharts"> </view>
				<view class="total">
					<view class="t-tit"> 总订单 </view>
					<view class="t-num"> {{total}} </view>
				</view>
			</view>
			<view class="list">
				<view class="item"> 
					<view class="label" style="background: #FDCC00;"> </view>
					<view class="value"> 待付款：{{data.status_0?data.status_0:'0'}} </view>
				</view>
				<view class="item">
					<view class="label" style="background: #0CD9B5;"> </view>
					<view class="value"> 待发货：{{data.status_1?data.status_1:'0'}} </view>
				</view>
				<view class="item">
					<view class="label" style="background: #94BFFF;"> </view>
					<view class="value"> 已发货：{{data.status_2?data.status_2:'0'}} </view>
				</view>
				<view class="item">
					<view class="label" style="background: #0098FA;"> </view>
					<view class="value"> 已完成：{{data.status_3?data.status_3:'0'}} </view>
				</view>
				<view class="item">
					<view class="label" style="background: #3B72AD;"> </view>
					<view class="value"> 已关闭：{{data.status_4?data.status_4:'0'}} </view>
				</view>
				<view class="item">
					<view class="label" style="background: #F27629;"> </view>
					<view class="value"> 退款中：{{data.status_5?data.status_5:'0'}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetShopDataApi } from '@/service/shop.js'
	import { useUserStore } from '@/store/index.js'
	export default {
		props: ['data'],
		computed: {
			total() {
				const { status_0, status_1, status_2, status_3, status_4, status_5 } = this.data
				return status_0+status_1+status_2+status_3+status_4+status_5
			}
		}
	}
</script>
<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				echartsData: {
					status_0: '',
					status_1: '',
					status_2: '',
					status_3: '',
					status_4: '',
					status_5: ''
				}
			}
		},
		methods: {
			initEcharts() {
				const that = this
				const myChart = echarts.init(document.getElementById('echarts'));
				let option;
				option = option = {
					color: ['#FDCC00', '#0CD9B5', '#94BFFF', '#0098FA', '#3B72AD', '#F27629'],
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: ['50%', '100%'],
							avoidLabelOverlap: false,
							label: {
								show: true,
								position: 'inside',
								formatter: '{d}%',
								color: '#fff',
								fontSize: '14px'
							},
							emphasis: null,
							labelLine: {
								show: true
							},
							data: [
								{ value: this.echartsData.status_0, name: '待付款' },
								{ value: this.echartsData.status_1, name: '待发货' },
								{ value: this.echartsData.status_2, name: '已发货' },
								{ value: this.echartsData.status_3, name: '已完成' },
								{ value: this.echartsData.status_4, name: '已关闭' },
								{ value: this.echartsData.status_5, name: '退款中' },
							]
						}
					]
				};
				option && myChart.setOption(option);
			},
			updateEcharts(newValue, oldValue) {
				console.log(newValue);
				this.echartsData = newValue
				this.initEcharts()
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-data {
		padding: 15px 12px 10px;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			.t1 {
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				margin-right: 4px;
			}
			.t2 {
				font-weight: 400;
				font-size: 12px;
				color: #9E9E9E;
				line-height: 17px;
			}
		}
		.echarts-box {
			display: flex;
			align-items: center;
			.echarts {
				width: 180px;
				height: 180px;
				position: relative;
				#echarts {
					width: 180px;
					height: 180px;
				}
				.total {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 110px;
					height: 110px;
					display: flex;
					border-radius: 50%;
					align-items: center;
					background-color: #fff;
					flex-direction: column;
					justify-content: center;
					.t-tit {
						font-size: 12px;
						font-weight: 400;
						line-height: 17px;
						color: rgba(0,0,0,0.4);
					}
					.t-num {
						color: #000000;
						font-size: 28px;
						font-weight: 400;
						line-height: 36px;
					}
				}
			}
			.list {
				height: 164px;
				margin-left: 34px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.item {
					display: flex;
					align-items: center;
					.label {
						width: 10px;
						height: 10px;
						border-radius: 99px;
						margin-right: 8px;
					}
					.value {
						color: #9E9E9E;
						font-size: 12px;
						font-weight: 400;
						line-height: 17px;
					}
				}
			}
		}
	}
</style>